import { Component, Inject, inject, NO_ERRORS_SCHEMA, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CustomAttributeDirective, CustomClickEventDirective, CustomShowDirective, DATA_TOKEN, EllipsisPipePipe, HighlightPipe, LANG_CONFIGTOKEN, Pagination, PaginationService, SafeNullPipe, TrimOnInputDirective, TrimPipe } from 'ngx-raw-ui';
import { BehaviorSubject, timer } from 'rxjs';

@Component({
  selector: 'app-pagination-page',
  standalone: true,
  imports: [
    CustomShowDirective,
    CustomAttributeDirective,
    CustomClickEventDirective,
    TrimOnInputDirective,

    EllipsisPipePipe,
    SafeNullPipe,
    TrimPipe,
    HighlightPipe,

    FormsModule
  ],
  providers: [
    {
      provide: LANG_CONFIGTOKEN,
      useValue: {
        name: '23',
        test: 'test'
      },

    },
    {
      provide: DATA_TOKEN,
      useValue: new BehaviorSubject<any>({})
    }
  ],
  // schemas: [NO_ERRORS_SCHEMA],
  // templateUrl: './pagination-page.component.html',
  styleUrl: './pagination-page.component.scss',
  template: `
  <p>pagination-page works!</p>

  <span (click)="ds()">ds</span>

  <div  *libCustomShow='isD1'>libCustomShow </div>

  <div class="t-flex t-text-sky-400 hover:t-text-sky-500"  libCustomAttribute  libCustomClickEvent [rawClick]="rawClick" [rawData]="clickRawData"   >custom structural directive </div>

  <div>{{lengthStr | ellipsisPipe:5:'...' }}</div>
  <div>emptyString:{{emptyString | safeNull:'--'}}

  <div>trim:{{trimString|trim}}</div>

  <input libTrimOnInput />
  
  <div>
  <input type="text" [(ngModel)]="searchText1" placeholder="Enter search text">
  <p [innerHTML]="fullText | highlight: searchText1:ts50"></p>
  </div>
 
  `
})
export class PaginationPageComponent implements OnInit {

  fullText: string = 'Angular is a platform for building mobile and desktop web applications.';
  searchText1: string = '';
  ts50 = 't-text-sky-500'

  private paginationService = inject(PaginationService);

  paginationControl: Pagination<any> = this.paginationService.createPagination<Partial<any>>(
    {
      searchParams: {
        name: '22',
      },
      pageParams: {
        pageSize: 10,
        pageNum: 0,
      }
    }
  );

  constructor(
    @Inject(LANG_CONFIGTOKEN) private lang: any,
    @Inject(DATA_TOKEN) private data: BehaviorSubject<any>

  ) {
    console.log(4, lang);
    const _data = this.data.getValue();
    console.log(56, _data);

  }
  ds() {
    this.data.next({ name: '222' });
    this.isD1 = !this.isD1;
  }

  lengthStr = 'pagination-page works!';
  emptyString = undefined;

  trimString = '   pagination-page works!   ';

  rawClick = (data: any) => {

    console.log('rawClick', data);
    const { pageParams } = this.paginationControl.getCurrentParams?.() || {};
    console.log('pageParams', pageParams)
    if (pageParams) {
      this.paginationControl.changePageNum(pageParams.pageNum + 1);
    }
    // this.paginationControl.changePageNum(pageParams?.pageNum + 1);
    this.paginationControl?.search({
      ...data,
      time: + new Date()
    });


    const res = this.paginationControl.getCurrentParams?.();
    console.log('res', res);

  }


  isD1 = true;

  clickRawData = {
    name: 'libCustomClickEvent directive',
    age: 22,
  }




  ngOnInit(): void {


    console.log(2, this.paginationControl);
    const params = this.paginationControl.getCurrentParams();
    console.log(3, params);
    this.paginationControl.changePageNum(2);
    this.paginationControl.changePageSize(20);
    this.paginationControl.search({ age: 2 });

    setTimeout(() => {
      console.log(1, this.paginationControl.getCurrentParams());
    })
  }

}
